<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>帮助中心</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>

        .help-center-division {
            height: 0.16rem;
            background: rgba(244, 244, 244, 1);
        }

        /*************菜单选择器**开始**************/
        .search-inside-warp {
            height: 0.76rem;
            z-index: 5000;
            border-top: solid 1px #F4F4F4;
            padding-left: 0.32rem;
            padding-right: 0.32rem;
        }

        .search-inside-warp .search-inside-column {
            white-space: nowrap;
            width: 100%;
        }

        .search-inside-warp .search-inside-column .search-inside-item {
            height: 0.72rem;
            line-height: 0.72rem;
            color: rgba(34, 34, 34, 0.45)
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline {
            width: 100%;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline span {
            width: .36rem;
            background: rgba(44, 104, 255, 1);
            border-radius: .04rem;
        }

        .search-inside-warp .search-inside-column .search-inside-item .search-inside-underline .underactive {
            height: 2px;
            width: 88px;
        }

        .search-inside-warp .search-inside-column .active {
            color: rgba(44, 104, 255, 1);
        }

        .search-inside-warp .inside-inside-traneara {
            width: .4rem;
            height: .88rem;
            right: 1.08rem;
            background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }


        .search-inside-warp .inside-inside-lefteara {
            width: .4rem;
            height: .88rem;
            left: 0;
            z-index: 11;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .search-inside-warp .column-img {
            width: .64rem;
            height: 0.72rem;
            /*margin-top: 0.14rem;*/
            margin-left: 0.44rem;
        }

        .search-inside-warp .column-img span {
            margin-left: 0;
        }

        /*************菜单选择器**结束**************/

        .help-question-font {
            height: 1.04rem;
            padding: 0 0.32rem 0 0.32rem;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
        }

        .help-title-font {
            font-size: 0.32rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
        }

        .help-inco-size {
            color: #999999;
        }


        /*底部反馈*/
        .help-center-feedback {
            font-size: 0.26rem;
            color: rgba(44, 104, 255, 1);
            padding: 0.58rem 0

        }


    </style>
</head>
<body>

<!--定义整个页面格局-->
<div class="flex-column h-100-p ff400">

    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">帮助中心</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <!--问题分类-->
    <div class="flex-row bg-white search-inside-warp">
        <div class="flex-row justify-content-between search-inside-column scroll-x">

        </div>
    </div>

    <div class="flex-column justify-content-between flex-1 mt8" style="overflow: hidden">
        <div class="h-100-p scroll-y">
            <!--问题列表 -->
            <div class="flex-column bg-main help-center-quesList">
            </div>

            <!-- 以上都不能解决我的问题 -->
            <div class="help-center-feedback ff400 ta-center" onclick="goToFeedback()">
                以上都不能解决我的问题
            </div>
        </div>
    </div>
</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>

<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let questionType = 1
  let list = [
    {funcName: '常见功能', questionType: '1'},
    {funcName: '功能与介绍', questionType: '2'},
    {funcName: '账号与安全', questionType: '3'},
    {funcName: '消息设置', questionType: '4'},
  ]

  //初始化二级菜单
  function dealMenuInside() {
    let htmlStr = ''
    //初始化列表
    $.each(list, function (i, it) {
      htmlStr += '       <div class="ff400 fspx14 search-inside-item pos-r ' + (i === 0 ? ' active ' : '') + ' " onclick="changeColumn(\'' + it.questionType + '\')">\n' +
        '                <span>' + it.funcName + '</span>\n' +
        '                <span class="flex-row justify-content-center search-inside-underline pos-a">\n' +
        '                    <span class=\'' + (i === 0 ? 'underactive' : '') + '\'" </span>\n' +
        '                </span>\n' +
        '            </div>'
    })

    $('.search-inside-column').html(htmlStr)

    //切换事件初始化
    $('.search-inside-warp .search-inside-column .search-inside-item').each(function (i, n) {
      $(n).click(function () {
        $('.search-inside-warp .search-inside-column .search-inside-item').removeClass('active')
        $(n).addClass('active')
        $('.search-inside-warp .search-inside-column .search-inside-item .search-inside-underline span').removeClass('underactive')
        $(n).find('span').addClass('underactive')
      })
    })
  }

  function initQuestion() {
    Server.helpCenter.getHelpCenterQuestion({
      pageNum: 1,
      pageSize: 40,
      questionType: questionType
    }).then(function (data) {
      let htmlStr = ''
      data.list.forEach(function (item) {
        htmlStr +=
          '<div><div  class="flex-row justify-content-between align-items-center fs15  help-question-font" onclick=goHelpCenterDetail(\'' + item.questionId + '\') >\n' +
          '    <div class="line1">' + item.title + '</div>\n' +
          '    <span class="iconfont iconfanhui fs11 help-inco-size" ></span> \n' +
          '</div></div>'
      })
      $('.help-center-quesList').html(htmlStr)
    })

  }

  function goHelpCenterDetail(questionId) {
    jsBridge.openWindow('html/user/help-detail.html?questionId=' + questionId, {}, {noBar: false})
  }

  //改变顶部菜单
  function changeColumn(e) {
    questionType = e
    //初始化问题列表
    initQuestion()
  }

  function goToFeedback() {
    jsBridge.openWindow('html/user/feedback.html', {}, {noBar: false})
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    //初始化菜单
    dealMenuInside()
    //初始化问题列表
    initQuestion()
  }

  //跳页
  // function goHelpCenterDetail(questionId) {
  //   jsBridge.openWindow('html/user/help-detail.html?questionId=' + questionId)
  // }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }
</script>
</html>
